.HitEggs{
    width: 100%;
    height: 100%;
    .top{
        height: 1.4rem;
    }
    .content{
        width: 100%;
        height: 15rem;
        position: relative;
        background: url('../../../assets/img/HitEggs/eggs_content_bg.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        .time{
            background: #C83226;
            padding: 0.1rem 0.4rem;
            border-radius: 2rem;
            color: #FFFFFF;
            margin: 0.6rem 0 0.2rem 0;
        }
        .container{
            width: 90%;
            height: 5rem;
            background: url('../../../assets/img/HitEggs/eggs_banner_bg.png');
            background-repeat: no-repeat;
            background-size: 100% auto;
            .container_warp{
                width: 7rem;
                height: 2rem;
                margin: auto;
                display: flex;
                align-items: center;
                .warp_box{
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    .warp{
                        flex-shrink: 0;
                        width: 25%;
                        height: 1.8rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        color: #F3B253;
                        animation-name: warp;
                        animation-duration: 10s;
                        animation-iteration-count:infinite;
                        animation-timing-function:linear;
                        img{
                            width: 60%;
                            height: 60%;
                            margin-bottom: 0.1rem;
                        }
                    }
                    @keyframes warp {
                        0% {
                             transform: translateX(0) translateY(0);
                            }
                        100% {
                             transform: translateX(-10.5rem) translateY(0);
                            }
                        
            
                    }
                }
                
            }
        }
        .count{
            position: absolute;
            left: 0;
            top: 3.5rem;
            width: 2rem;
            height: 0.8rem;
            background: linear-gradient(90deg,#e75e18,#e0220f 98%);
            color: #FFFFFF;
            text-align: center;
            letter-spacing: 0.05rem;
            line-height: 0.8rem;
            border-top-right-radius: 2rem;
            border-bottom-right-radius: 2rem;
            border: 0.02rem solid #fcd4ac;
            span{
                font-size: 0.4rem;
                color: #FDF4A1;
                margin: 0 0.05rem;
            }
        }
        .eggs{
            width: 99%;
            height: 100%;
            margin-top: 0.6rem;
            display: flex;
            justify-content: center;
            .eggs_box{
                width: 90%;
                // height: 30%;
                text-align: center;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                .ishit{
                    pointer-events: none;
                }
                .gold_egg{
                    width: 33%;
                    .gif_box{
                        position: relative;
                        .gif{
                            width: 80%;
                        }
                        .hammer{
                            position: absolute;
                            top: -0.6rem;
                            right: -0.5rem;
                            width: 60%;
                        }
                    }
                    .complete{
                        position: relative;
                        .light{
                            position: absolute;
                            top: -10%;
                            left: 0;
                            width: 100%;
                            animation-name: light;
                            animation-duration: 10s;
                            animation-iteration-count:infinite;
                            animation-timing-function:linear;
                        }
                        @keyframes light{
                            0% {
                                transform:rotate(0deg)
                               }
                           100% {
                                transform:rotate(360deg)
                               }
                        }
                    }
                    
                    img{
                        width: 80%;
                    }
                  
                }
            }
            
        }
    }
    .hammerContainer{
        // width: 100%;
        background: #CD3135;
        padding: 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .hammer_btn{
            width: 50%;
            background: linear-gradient(rgb(254, 244, 160), rgb(255, 140, 18));
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.4rem;
            border-radius: 2rem;
            color: #CD3135;
            font-size: 0.4rem;
            font-weight: bold;
            margin: 0.2rem 0 0.5rem 0;
            letter-spacing:0.05rem
        }
    }
    .egg_banner{
        // width: 100%;
        padding: 0.2rem;
        img{
            width: 100%;
        }
    }
    .Pop-up_egg{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: black;
        background-color:rgba(27, 27, 27, 0.651);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .Pop-up_box{
            width: 80%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .up_success_playImg{
                background: url('../../../assets/img/HitEggs/eggs_success.png');
                background-size: 100%;
                background-repeat: no-repeat;
                width: 100%;
                height: 35%;
                text-align: center;
                display: flex;
                flex-direction: column;
               
                align-items: center;
                p:nth-child(1){
                    margin-top: 0.5rem;
                    font-size: 0.4rem;
                    font-weight: bold;
                }
                p:nth-child(2){
                    margin-top: 0.4rem;
                    font-size: 1.2rem;
                    color: #C15E4B;
                    font-weight: bold;
                    border: 1px solid black;
                    width: 2rem;
                    height: 2rem;
                    span{
                        font-size: 0.4rem;
                    }
                }
                button{
                    width: 80%;
                    background: #F5DAB5;
                    padding: 0.2rem;
                    margin-top: 0.7rem;
                    border-radius: 2rem;
                    color: #BE624C;
                    font-size: 0.4rem;
                   
                }
            }
            .close{
                text-align: center;
                // margin-top: 0.5rem;
            }
        }
    }
}
